<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq的一些效果</title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

</head>
<style>
    #panel,
    #flip {
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
    }

    #panel {
        padding: 50px;
        display: none;
    }
</style>

<body>
    <p>点击按钮显示或者隐藏</p>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>

    <hr>
    <button>显示/隐藏</button>
    <hr>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

    <button>点击淡入元素</button>
    <hr>
    <button id="btn">点击淡出元素</button>
    <br>
    <button id="btn1">点击淡入淡出的切换</button>
    <br>
    <button id="btn2">点击让颜色变淡</button>
    <hr>
    <div id="flip">点我滑下面板</div>
    <div id="panel">Hello world!</div>
    <script>
        /* $(function(){
        $('#hide').click(function(){
            $('p').hide(2000,function(){
                alert('已隐藏')
            })
        })

        $('#show').click(function(){
            $('p').show(1000,function(){
                alert('1秒后再显示')
            })
        })

    }) */

        /* $(function(){
           $('button').click(function(){
               $('p').toggle(2000,function(){
                   alert('切换成功')
               })
           })
        }) */

        // 淡入fadeIn(speed,callback)
        $(function () {
            $('button').click(function () {
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);
            })
        })

        // 淡出fadeOut()
        $(function () {
            $('#btn').click(function () {
                $("#div1").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(3000);
            })
        })


        // 淡入淡出的切换
        $(function () {
            $('#btn1').click(function () {
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(3000);
            })
        })

        // 点击使颜色变淡,fadeTo(speed,opacity,callback)
        $(function () {
            $('#btn2').click(function () {
                $("#div1").fadeTo("slow", 0.15);
                $("#div2").fadeTo("slow", 0.4);
                $("#div3").fadeTo("slow", 0.7);
            })
        })

        /* // slideDown用于向下滑动元素
        $(function(){
            $("#flip").click(function(){
                $("#panel").slideDown("slow");
            })
        })  */
       

       /*  // slideUp用于向上滑动元素
        $(function(){
            $("#flip").click(function(){
                $("#panel").slideUp("slow");
            })
        })  */

        $(function(){
            $("#flip").click(function(){
                $("#panel").slideToggle("slow");
            })
        }) 




    </script>
</body>

</html>